<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <link rel="stylesheet" href="../base.css" />
    <link rel="stylesheet" href="homepage.css" />
    <title>首页</title>
    <style></style>
  </head>
  <body>
    <header>
      <!-- 头部广告 -->
      <div class="top" id="top">
        <a href="javascript::" class="topBg">
          <img src="img/广告.png" />
        </a>
        <a href="javascript:;" class="topClose"></a>
      </div>
      <!-- 搜索框 -->
      <div class="header-search clearfix">
        <div class="header-search-left">
          <img src="img/图标.png" />
        </div>
        <div class="header-search-middle">
          <i class="icon-search header-icon"></i>搜索商品名称
        </div>
        <div class="header-search-right">
          <i class="icon-we header-icon"></i>
        </div>
      </div>
      <!-- 顶部导航 -->
      <div class="header-nav-wrap">
        <div class="nav-display">
          <i class="icon-jiantou imgs-icon"></i>
        </div>
        <div class="nav-item-list">
          <div class="title">全部</div>
          <div class="btn-wrap clearfix">
            <span class="btn-active">推荐</span>
            <span>手机</span>
            <span>智能</span>
            <span>电视</span>
            <span>笔记本</span>
            <span>家电</span>
            <span>生活周边</span>
          </div>
        </div>
        <nav class="header-nav clearfix">
          <div class="nav-item">
            <span class="nav-active">推荐</span>
          </div>
          <div class="nav-item">
            <span>手机</span>
          </div>
          <div class="nav-item">
            <span>智能</span>
          </div>
          <div class="nav-item">
            <span>电视</span>
          </div>
          <div class="nav-item">
            <span>笔记本</span>
          </div>
          <div class="nav-item">
            <span>家电</span>
          </div>
        </nav>
      </div>
    </header>
    <main>
      <!-- 轮播图 -->
      <div class="banner">
        <ul class="banner-wrap clearfix">
          <li class="banner-item"><img src="img/banner1.jpg" /></li>
          <li class="banner-item"><img src="img/banner2.jpg" /></li>
          <li class="banner-item"><img src="img/banner3.jpg" /></li>
        </ul>
        <div class="dots">
          <div class="dot dot-active"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
      <div class="cell clearfix">
        <img src="img/小米秒杀.png" />
        <img src="img/小米众筹.png" />
        <img src="img/小米5G.png" />
        <img src="img/以旧换新.png" />
        <img src="img/超值特卖.png" />
      </div>
      <div class="cell clearfix">
        <img src="img/电视热卖.png" />
        <img src="img/笔记本热卖.png" />
        <img src="img/电视热卖.png" />
        <img src="img/洗衣机热卖.png" />
        <img src="img/米粉卡.png" />
      </div>
      <div class="line"></div>
      <div class="new clearfix">
        <img src="img/red米k30.jpg" />
        <img src="img/手环4.jpg" />
        <img src="img/电视特惠.jpg" />
      </div>
      <div class="line"></div>
      <div class="life clearfix">
        <img src="img/生活中的艺术.jpg" />
      </div>
      <div class="line"></div>
      <!-- 每日精选 -->
      <div class="mrjx content-content">
        <img src="img/red米note8.jpg" />
        <div class="compon-line"></div>
        <div class="compon">
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米10 pro.jpg" />
            </div>
            <div class="compon-info">
              <div class="name">小米10 Pro</div>
              <div class="desc">骁龙865 / 50倍变焦</div>
              <div class="price">4999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米10 pro.jpg" />
            </div>
            <div class="compon-info">
              <div class="name">小米10 Pro</div>
              <div class="desc">骁龙865 / 50倍变焦</div>
              <div class="price">4999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
        </div>
        <div class="compon">
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米10 pro.jpg" />
            </div>
            <div class="compon-info">
              <div class="name">小米10 Pro</div>
              <div class="desc">骁龙865 / 50倍变焦</div>
              <div class="price">4999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米10 pro.jpg" />
            </div>
            <div class="compon-info">
              <div class="name">小米10 Pro</div>
              <div class="desc">骁龙865 / 50倍变焦</div>
              <div class="price">4999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
        </div>
        <div class="compon">
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米10 pro.jpg" />
            </div>
            <div class="compon-info">
              <div class="name">小米10 Pro</div>
              <div class="desc">骁龙865 / 50倍变焦</div>
              <div class="price">4999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米10 pro.jpg" />
            </div>
            <div class="compon-info">
              <div class="name">小米10 Pro</div>
              <div class="desc">骁龙865 / 50倍变焦</div>
              <div class="price">4999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
        </div>
        <div class="compon">
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米10 pro.jpg" />
            </div>
            <div class="compon-info">
              <div class="name">小米10 Pro</div>
              <div class="desc">骁龙865 / 50倍变焦</div>
              <div class="price">4999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米10 pro.jpg" />
            </div>
            <div class="compon-info">
              <div class="name">小米10 Pro</div>
              <div class="desc">骁龙865 / 50倍变焦</div>
              <div class="price">4999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
        </div>

        <p class="content-title">更多小米手机产品 &gt;</p>
      </div>
      <div class="line"></div>
      <!-- 小米电视 -->
      <div class="xmds content-content">
        <img src="img/小米电视A4.webp" />
        <div class="compon-line"></div>
        <div class="compon">
          <div class="content-item">
            <div class="compon-img">
              <img src="img/电视.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">小米电视4A 65英寸</div>
              <div class="desc">4K HDR，人工智能语音系统</div>
              <div class="price">2799<span class="old price">2999</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
          <div class="content-item">
            <div class="compon-img">
              <img src="img/电视.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">小米电视4A 65英寸</div>
              <div class="desc">4K HDR，人工智能语音系统</div>
              <div class="price">2799<span class="old price">2999</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
        </div>
        <div class="compon">
          <div class="content-item">
            <div class="compon-img">
              <img src="img/电视.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">小米电视4A 65英寸</div>
              <div class="desc">4K HDR，人工智能语音系统</div>
              <div class="price">2799<span class="old price">2999</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
          <div class="content-item">
            <div class="compon-img">
              <img src="img/电视.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">小米电视4A 65英寸</div>
              <div class="desc">4K HDR，人工智能语音系统</div>
              <div class="price">2799<span class="old price">2999</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
        </div>
        <div class="compon">
          <div class="content-item">
            <div class="compon-img">
              <img src="img/电视.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">小米电视4A 65英寸</div>
              <div class="desc">4K HDR，人工智能语音系统</div>
              <div class="price">2799<span class="old price">2999</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
          <div class="content-item">
            <div class="compon-img">
              <img src="img/电视.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">小米电视4A 65英寸</div>
              <div class="desc">4K HDR，人工智能语音系统</div>
              <div class="price">2799<span class="old price">2999</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
        </div>
        <div class="title-line"></div>
        <p class="content-title">更多小米电视产品 &gt;</p>
      </div>
      <div class="line"></div>
      <div class="life clearfix">
        <img src="img/小米专属.jpg" />
      </div>
      <div class="line"></div>
      <!-- 小米笔记本 -->
      <div class="xmbjb content-content">
        <img src="img/red米book13.jpg" />
        <div class="compon-line"></div>
        <div class="compon">
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米游戏本.webp" />
            </div>
            <div class="compon-info">
              <div class="name">小米游戏本</div>
              <div class="desc">冷酷的性能怪兽</div>
              <div class="price">8999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米游戏本.webp" />
            </div>
            <div class="compon-info">
              <div class="name">小米游戏本</div>
              <div class="desc">冷酷的性能怪兽</div>
              <div class="price">8999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
        </div>
        <div class="compon">
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米游戏本.webp" />
            </div>
            <div class="compon-info">
              <div class="name">小米游戏本</div>
              <div class="desc">冷酷的性能怪兽</div>
              <div class="price">8999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米游戏本.webp" />
            </div>
            <div class="compon-info">
              <div class="name">小米游戏本</div>
              <div class="desc">冷酷的性能怪兽</div>
              <div class="price">8999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
        </div>
        <div class="compon">
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米游戏本.webp" />
            </div>
            <div class="compon-info">
              <div class="name">小米游戏本</div>
              <div class="desc">冷酷的性能怪兽</div>
              <div class="price">8999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
          <div class="content-item">
            <div class="compon-img">
              <img src="img/小米游戏本.webp" />
            </div>
            <div class="compon-info">
              <div class="name">小米游戏本</div>
              <div class="desc">冷酷的性能怪兽</div>
              <div class="price">8999<span>起</span></div>
              <div class="buy-btn">立即购买</div>
            </div>
          </div>
        </div>
        <div class="title-line"></div>
        <p class="content-title">更多小米笔记本产品 &gt;</p>
      </div>
      <div class="line"></div>
      <div class="life clearfix">
        <img src="img/米家空调.jpg" />
      </div>
      <div class="line"></div>
      <!-- 精选家电 -->
      <div class="jpjd content-content">
        <img src="img/全自动洗衣机.webp" />
        <div class="compon-line2"></div>
        <div class="compon2">
          <div class="content-item2">
            <div class="compon-img">
              <img src="img/空调.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">1111111111
              <div class="name">空调（1.5匹/一级能效）</div>
              <div class="desc">变频节能，高效制冷热</div>
              <div class="price">2699</div>
            </div>
          </div>
          <div class="content-item2">
            <div class="compon-img">
              <img src="img/空调.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">空调（1.5匹/一级能效）</div>
              <div class="desc">变频节能，高效制冷热</div>
              <div class="price">2699</div>
            </div>
          </div>
        
        </div>
        <div class="compon2">
          <div class="content-item2">
            <div class="compon-img">
              <img src="img/空调.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">空调（1.5匹/一级能效）</div>
              <div class="desc">变频节能，高效制冷热</div>
              <div class="price">2699</div>
            </div>
          </div>
          <div class="content-item2">
            <div class="compon-img">
              <img src="img/空调.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">空调（1.5匹/一级能效）</div>
              <div class="desc">变频节能，高效制冷热</div>
              <div class="price">2699</div>
            </div>
          </div>
        
        </div>
        <div class="compon2">
          <div class="content-item2">
            <div class="compon-img">
              <img src="img/空调.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">空调（1.5匹/一级能效）</div>
              <div class="desc">变频节能，高效制冷热</div>
              <div class="price">2699</div>
            </div>
          </div>
          <div class="content-item2">
            <div class="compon-img">
              <img src="img/空调.webp" />
              <div class="tag">
                <img src="img/打折.png" />
              </div>
            </div>
            <div class="compon-info">
              <div class="name">空调（1.5匹/一级能效）</div>
              <div class="desc">变频节能，高效制冷热</div>
              <div class="price">2699</div>
            </div>
          </div>
        
        </div>
       
        <div class="title-line"></div>
        <p class="content-title">更多米家家电产品 &gt;</p>
      </div>
      <div class="line"></div>
      <div class="life clearfix">
        <img src="img/新品好物.jpg" />
      </div>
      <div class="line"></div>
      <!-- 米家智能 -->
      <div class="mjzn content-content">
        <img src="img/米家煤气灶.jpg" />
        <div class="compon-line2"></div>
        <div class="compon3">
          <div class="content-item2 clearfix">
            <div class="compon-img">
              <img src="img/打印机.jpg" />
            </div>
            <div class="compon-info">
              <div class="name">米家照片打印机</div>
              <div class="desc">手机即拍即印</div>
              <div class="price">499</div>
            </div>
          </div>
        </div>
        <div class="compon3">
          <div class="content-item2 clearfix">
            
            <div class="compon-info">
              <div class="name">米家照片打印机</div>
              <div class="desc">手机即拍即印</div>
              <div class="price">499</div>
            </div>
            <div class="compon-img">
                <img src="img/打印机.jpg" />
              </div>
          </div>
        </div>
        <div class="compon3">
          <div class="content-item2 clearfix">
            <div class="compon-img">
              <img src="img/打印机.jpg" />
            </div>
            <div class="compon-info">
              <div class="name">米家照片打印机</div>
              <div class="desc">手机即拍即印</div>
              <div class="price">499</div>
            </div>
          </div>
        </div>
       
        <div class="title-line"></div>
        <p class="content-title">更多米家智能产品 &gt;</p>
      </div>
      <div class="line"></div>
      <div class="footer-cell">
        <img src="img/学习办公.webp" />
        <img src="img/学习办公.webp" />
      </div>
      <div class="compon-line2"></div>
      <div class="footer-cell">
        <img src="img/学习办公.webp" />
        <img src="img/学习办公.webp" />
      </div>
      <div class="compon-line2"></div>
      <div class="footer-cell">
        <img src="img/学习办公.webp" />
        <img src="img/学习办公.webp" />
      </div>
      <div class="line"></div>
      <div class="life clearfix">
        <img src="img/小米以旧换新.jpg" />
      </div>
      <div class="life clearfix">
        <img src="img/了解小米.png" />
      </div>
    </main>
    <footer>
      <ul class="footer-nav">
        <li class="buttom-nav">
          <a href="../首页/index.html" class="footer-nav-active">
            <i class="icon-home imgs-icon"></i>
            <span>首页</span>
          </a>
        </li>
        <li class="buttom-nav">
          <a href="../分类/index.html">
            <i class="icon-category imgs-icon"></i>
            <span>分类</span>
          </a>
        </li>
        <li class="buttom-nav">
          <a href="../星球/index.html">
            <i class="icon-star imgs-icon"></i>
            <span>星球</span>
          </a>
        </li>
        <li class="buttom-nav">
          <a href="../购物车/index.html">
            <i class="icon-shopping imgs-icon"></i>
            <span>购物车</span>
          </a>
        </li>
        <li class="buttom-nav">
          <a href="../我的/index.html">
            <i class="icon-we imgs-icon"></i>
            <span>我的</span>
          </a>
        </li>
      </ul>
    </footer>
    <!-- 返回顶部 -->
    <div class="back">
      <a href="javascript:window.scrollTo(0,0)"
        ><img src="img/返回顶部.png"
      /></a>
    </div>

    <script src="../base.js"></script>
    <script src="homepage.js"></script>
  </body>
</html>
